<template>
  <div class="payRecord">
    <div v-if="loading" class="loading"><van-loading class="load-icon" size="20px" type="spinner" /><span>拼命加载中...</span></div>
    <div class="order">
      <div class="title">
        <div class="icon">
          <img src="../../../../assets/images/icon/icon_order.png" alt="">
        </div>
        <span class="title-sn">退单号：{{ refundDetail.order_refund_sn }}</span>
      </div>
      <div class="price">
        <div class="price-list large">
          <span class="label">订单金额：</span>
          <span class="txt font-colorRed">&yen;{{ refundDetail.pay_fee }}</span>
        </div>
        <!--<div class="price-list">-->
          <!--<span class="label">退款总额：</span>-->
          <!--<span class="txt">&yen;{{ refundDetail.wait_refund_fee }}</span>-->
        <!--</div>-->
      </div>
    </div>
    <div class="record">
      <div class="titles">付款记录</div>
      <div v-for="item in payRecordList" :key="item.order_gathering_id">
        <div class="record-list">
          <div class="record-list-com">
            <div class="txt title">支付流水号：{{ item.gathering_sn }}</div>
            <div class="fr">
              <span>状态：</span>
              <span v-if="item.status == 0" class="status font-colorOrange">未审核</span>
              <span v-if="item.status == 1" class="status font-colorGreen">已审核</span>
              <span v-if="item.status == 2" class="status">作废</span>
            </div>
          </div>
          <div class="record-list-com">
            <div class="txt">
              <span>支付方式：</span>
              <span v-if="item.pay_type === 1">现金</span>
              <span v-if="item.pay_type === 2">银行转账</span>
              <span v-if="item.pay_type === 3">微信</span>
              <span v-if="item.pay_type === 4">支付宝</span>
              <span v-if="item.pay_type === 0">余额</span>
            </div>
            <div class="txt">支付金额：&yen;{{ item.pay_fee }}</div>
            <div class="txt">支付时间：{{ item.pay_time }}</div>
          </div>
        </div>
      </div>
      <div v-if="payRecordList.length == 0 && !loading">
        <div class="noData small">
          <div class="content">
            <img src="../../../../assets/images/noData/noDataRecord.png" alt="">
            <div class="text">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getRefundBalanceList } from '@/api/refund'
  export default {
    name: 'Index',
    props: {
      refundDetail: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {
        payType: undefined,
        loading: false,
        payRecordList: []
      }
    },
    created() {
      this.getOrderGatheringListFn()
    },
    methods: {
      // 获取收款记录列表
      getOrderGatheringListFn() {
        this.loading = true
        const dataset = {
          order_refund_id: this.$route.query.id
        }
        getRefundBalanceList(dataset).then(res => {
          this.loading = false
          const data = res.data
          if (data.status_code === 200) {
            this.payRecordList = data.data.list.order_refund_get_list
          } else {
            this.payRecordList = []
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "src/styles/mixin.scss";
  .payRecord{
    .order{
      padding-left: pxCalc(20px);
      background: #fff;
      margin-bottom: pxCalc(5px);
      .title{
        padding: pxCalc(16px) pxCalc(20px) pxCalc(13px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        font-size: pxCalc(14px);
        .icon{
          width: pxCalc(17px);
          display: inline-block;
          vertical-align: pxCalc(-4px);
          img{
            width: 100%;
          }
        }
        &-sn{
          color: #363b43;
        }
        .order-sn{
          color: #999999;
          font-size: pxCalc(13px);
        }
      }
      .price{
        font-size: 0;
        padding: pxCalc(13px) 0 pxCalc(14px);
        border-bottom: pxCalc(1px) solid #f5f5f5;
        &-list{
          font-size: pxCalc(12px);
          color: #363b43;
          width: 50%;
          display: inline-block;
          line-height: pxCalc(26px);
          &.large{
            font-size: pxCalc(14px);
          }
        }
      }
    }
    .record{
      padding-left: pxCalc(20px);
      background: #fff;
      .titles{
        padding: pxCalc(11px) pxCalc(20px) pxCalc(11px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        font-size: pxCalc(14px);
      }
      .record-list{
        padding:pxCalc(10px) pxCalc(20px) pxCalc(10px) 0;
        border-bottom: pxCalc(1px) solid #f5f5f5;
        &-com{
          line-height: pxCalc(25px);
          color: #999999;
          .txt{
            font-size: pxCalc(13px);
            &.title{
              display: inline-block;
              color: #363b43;
              font-size: pxCalc(14px);
              display: inline-block;
            }
          }
        }
      }
    }
  }
</style>
